<script setup lang="ts">
import {computed} from 'vue'
import {useLang} from '../../composables/lang'
import apiTypingLocale from '../../i18n/component/api-typing.json'

defineProps({
  type: String,
  details: String,
})

const lang = useLang()
const detail = computed(() => apiTypingLocale[lang.value].detail)
</script>

<template>
  <span class="inline-flex items-center">
    <code class="api-typing mr-1">
      {{ type }}
    </code>
    <ClientOnly>
        <div
            :title="details"
            style="color: orange"
            :aria-label="detail"
            class="p-2 text-4"
        />
    </ClientOnly>
  </span>
</template>
